<template>
  <div class="sub-nav">
    <div class="sub-nav-header">
      <ul class="nav">
        <li>
          <router-link :to="{name:'Home'}">
            <em :class="fullPath.startsWith('/Home')?'em-active':''" data-index="1" @click="getIndex($event)">推荐</em>
          </router-link>
        </li>
        <li>
          <router-link :to="{name:'TopDetail',params:{id:'19723756'}}">
            <em data-index="2" :class="fullPath.startsWith('/TopDetail')?'em-active':''" @click="getIndex($event)">排行榜</em>
          </router-link>
        </li>
        <li>
          <router-link :to="{name:'PlayList',params:{name:'全部'}}">
            <span></span>
            <em data-index="3" :class="fullPath.startsWith('/PlayList')?'em-active':''" @click="getIndex($event)">歌单</em>
          </router-link>
        </li>
        <li>
          <router-link :to="{name:'DjRadioHome'}">
            <em data-index="4" :class="fullPath.startsWith('/DjRadio')?'em-active':''" @click="getIndex($event)">主播电台</em>
          </router-link>
        </li>
        <li>
          <router-link :to="{name:'Signed'}">
            <em data-index="5" :class="fullPath.startsWith('/ArtistView')?'em-active':''" @click="getIndex($event)">歌手</em>
          </router-link>
        </li>
        <li>
          <router-link :to="{name:'AlbumView'}">
            <em data-index="6" :class="fullPath.startsWith('/NewAlbum')?'em-active':''" @click="getIndex($event)">新碟上架</em>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",

  data() {
    return {
      list: ['推荐', '排行榜', '歌单', '主播电台', '歌手', '新碟上架'],
      index: 1,
      fullPath: ''
    }
  },
  computed: {
    path() {
      return this.$route.path;
    }
  },
  methods: {
    getIndex(e) {
      this.index = e.target.dataset.index
    }

  },
  watch: {
    path(newVal) {
      this.fullPath = newVal
    }
  },
  created() {
    this.fullPath = this.$route.path
  }
}
</script>

<style scoped lang="less">
.sub-nav {
  height: 35px;
  background-color: #C20C0C;

  .sub-nav-header {
    width: 1100px;
    height: 35px;
    margin: 0 auto;

    .nav {

      float: left;
      margin-left: 180px;

      li {
        height: 35px;
        float: left;

        text-align: center;
        line-height: 35px;


        a {
          width: 100%;
          height: 100%;
          display: inline-block;

          &:hover {
            cursor: pointer;
          }

          color: white;

          .em-active {
            background-color: #9B0909;
          }

          em {
            display: inline-block;
            height: 20px;
            padding: 0 13px;
            margin: 7px 17px 0;
            border-radius: 20px;
            line-height: 21px;

          }
        }

        &:nth-child(1) {
          width: 84px;
        }

        &:nth-child(2) {
          width: 96px;
        }

        &:nth-child(3) {
          width: 84px;

          a {
            position: relative;

            span {
              position: absolute;
              top: 9px;
              right: 21px;
              display: inline-block;
              width: 8px;
              height: 8px;
              background: url("../../assets/white-r-icon@3x.png");
              background-size: 8px 8px;
            }
          }
        }

        &:nth-child(4) {
          width: 108px;
        }

        &:nth-child(5) {
          width: 84px;
        }

        &:nth-child(6) {
          width: 108px;
        }
      }
    }
  }
}
</style>